<template>
    <div class="tree-table">
        <Table 
            ref='testRef1'
            :tableObj="tableObj1"
            @topBtnClick='topBtnClick'
        ></Table>
    </div>
</template>
<script>
import Table from "@/components/table";
export default {
    components:{Table},
    data(){
        return {
            tableObj1:{
                id:'tabComp1',
                rowId:'id',//自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）
                height: 600, //表格高度
                loading: false, //表格加载loading效果
                // topBtnAlign:'right',//决定表格上方按钮位置，默认居左
                treeConfig:{
                children: 'childs', 
                //expandRowKeys: [1005],//设置默认展开行的主键,此处应该设置rowId，不然不起作用
                // expandAll: true,默认展开所有树
                // iconOpen: 'fa fa-minus-square-o', //树展开图标
                // iconClose: 'fa fa-plus-square-o',//树关闭图标
                },
                checkConfig:{
                labelField: 'name',
                //checkRowKeys: [24300, 24556],//设置默认选中树节点
                //checkStrictly: true,//是否显示全选按钮,子节点不关联父节点，也就是没有半选状态
                },//单元格内容带多选框，但表头不带多选框配置
                topBtnList:[
                    {
                        key:'openAll',
                        title:'展开所有',
                        icon:'circle-plus-outline',
                        type:'success',
                        size:'mini'
                    },
                    {
                        key:'closeAll',
                        title:'关闭所有',
                        icon:'remove-outline',
                        type:'warning',
                        size:'mini'
                    },
                    {
                        key:'getChoose',
                        title:'获取选中',
                        icon:'remove-outline',
                        type:'warning',
                        size:'mini'
                    }
                ],
                tableData: [], //表格数据
                columnType:[
                    {
                        type: "column", //一级表头
                        column: [
                        {
                            key:'name',
                            title:'名称',
                            treeNode:true,
                            type:'checkbox',
                            align:'left'
                        },
                        {
                            key:'size',
                            title:'尺寸',  
                        },
                        {
                            key:'type',
                            title:'类型',  
                        },
                        {
                            key:'date',
                            title:'日期',
                        },
                        ]
                    }
                ]
            },
        }
    },
    mounted(){
        this.tableObj1.tableData= [
            { id: 1000, name: 'vxe-table 从入门到放弃1', type: 'mp3', size: 1024, date: '2020-08-01' },
            {
                id: 1005,
                name: 'Test2',
                type: 'mp4',
                size: null,
                date: '2021-04-01',
                childs: [
                { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
                { id: 20045, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
                {
                    id: 10053,
                    name: 'vxe-table 从入门到放弃96',
                    type: 'avi',
                    size: null,
                    date: '2021-04-01',
                    childs: [
                    { id: 24330, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
                    { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
                    { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
                    ]
                }
                ]
            },
            { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01',
                childs: [
                    { id: 24301, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
                    { id: 20046, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
                    {
                    id: 10054,
                    name: 'vxe-table 从入门到放弃96',
                    type: 'avi',
                    size: null,
                    date: '2021-04-01',
                    childs: [
                        { id: 24331, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
                        { id: 21012, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
                        { id: 22201, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
                    ]
                    }
                ]
                },
            { id: 24556, name: 'vxe-table 从入门到放弃9', type: 'avi', size: 224, date: '2020-10-01' }
        ]
    },
    methods:{
        //topBtn
        topBtnClick(event,key){
            const $table=this.$refs.testRef1.$refs.table_tabComp1;
            if(key=='openAll'){
                $table.setAllTreeExpand(true);
            }
            if(key=="closeAll"){
                $table.clearTreeExpand()
            }
            if(key=='getChoose'){
                //获取选中数据，不包括半选
                //let selectRow =  $table.getCheckboxRecords();
                //获取半选状态数据，如果传入参数true，则获取全表已选中的数据
                let selectRow=$table.getCheckboxIndeterminateRecords();
            }
        },
    }
}
</script>